import { Button, Form, Input, message, Modal } from 'antd';
import { useRef } from 'react';
import styles from '../index.less';

interface Props {
  handleCancel: () => void;
  password: string | string[] | null;
  visible: boolean;
}

const ChangePassword: React.FC<Props> = ({ handleCancel, password, visible }) => {
  const [form] = Form.useForm();
  const formRef = useRef<any | undefined>();
  const formItemLayout = {
    labelCol: {
      xs: { span: 30 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const confirmPwd = () => {
    if (
      !form.getFieldValue('oldPassword') ||
      !form.getFieldValue('newPassword') ||
      !form.getFieldValue('confirmPassword')
    ) {
      message.error('请输入');
    } else if (form.getFieldValue('oldPassword') !== password) {
      message.error('您输入的密码有误，请重新输入！');
    }
  };
  const onFinish = () => {
    message.success('Submit success!');
  };
  return (
    <Modal
      visible={visible}
      onCancel={handleCancel}
      title={'修改密码'}
      className={styles.passModal}
      footer={[
        <Button key="submit" type="primary" onClick={confirmPwd} htmlType="submit">
          提交
        </Button>,
        <Button key="back" onClick={handleCancel}>
          取消
        </Button>,
      ]}
    >
      <Form form={form} onFinish={onFinish} ref={formRef}>
        <Form.Item
          label="旧密码"
          name="oldPassword"
          {...formItemLayout}
          rules={[{ required: true, message: '请输入旧的密码' }]}
        >
          <Input.Password placeholder="请输入旧密码" />
        </Form.Item>
        <Form.Item
          label="新密码"
          name="newPassword"
          {...formItemLayout}
          rules={[
            { required: true, message: '请输入密码!' },
            {
              pattern:
                /^S*(?=\S{9,})(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/,
              message: (
                <div>
                  <div>长度为9~16个字符</div>
                  <div>必须包含大小写字母，数字或特殊符号任意3项!</div>
                </div>
              ),
            },
          ]}
        >
          <Input.Password placeholder="请输入新密码" />
        </Form.Item>
        <Form.Item
          label="确认新密码"
          name="confirmPassword"
          {...formItemLayout}
          rules={[
            { required: true, message: '请输入密码!' },
            {
              pattern:
                /^S*(?=\S{9,})(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/,
              message: (
                <div>
                  <div>长度为9~16个字符</div>
                  <div>必须包含大小写字母，数字或特殊符号任意3项!</div>
                </div>
              ),
            },
          ]}
        >
          <Input.Password placeholder="请确认新密码" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ChangePassword;
